<template>
	<div class="site-aside-container">
		<div class="top" v-if="data">
			<Avatar :url="data ? data.avatar : avatarUrl" :size="150"></Avatar>
			<h3>{{ data ? data.siteTitle : '正在加载...' }}</h3>
		</div>
		<Menu></Menu>
		<Contact v-if="data"></Contact>
		<p v-if="data" class="footer">
			{{ data.icp }}
		</p>
	</div>
</template>

<script>
/* 宽度和高度撑满外层容器 */
import Avatar from '@/components/Avatar'
import Menu from '@/components/Menu'
import Contact from '@/components/Contact'
import avatarUrl from '@/assets/avatar/hsq.jpg'
import { mapState } from 'vuex'
export default {
	name: 'SiteAside',
	components: { Avatar, Menu, Contact },
	data() {
		return {
			avatarUrl: avatarUrl,
		}
	},
	computed: {
		...mapState('setting', ['data']),
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/basic/var.less';
.site-aside-container {
	overflow: auto; /* BFC解决外边距合并 */
	background-color: @dark;
	height: 100%;
	.avatar-container {
		margin: 20px auto;
	}
	.contact-container {
		margin-top: 80px;
		padding-left: 20px;
	}
	.top {
		display: flex;
		flex-direction: column;
		align-items: center;
		& > h3 {
			margin-top: -10px;
		}
		margin-bottom: 30px;
		color: #fff;
	}
}
.footer {
	text-align: center;
	font-size: 12px;
	margin: 10px 0;
}
</style>
